今天正式動手。我們會用 Vite（一個輕量、快速的前端建置工具）搭配原生 JavaScript（不用額外框架，降低初學者的學習門檻）來開發 SyncETA Lite。

安裝 Node.js 與建立專案

請先確認電腦已安裝 Node.js 18 以上版本，接著在終端機執行：

npm create vite@latest syncetalite-pwa -- --template vanilla
cd syncetalite-pwa
npm install

執行完後，你會得到一個新的資料夾 syncetalite-pwa/，這就是我們接下來 30 天所有程式碼的家。

整個系列的資料夾結構規劃

為了讓每天的程式碼都有明確的家，我先把完整的專案結構規劃出來，之後每天會標注新增/修改的是哪個檔案：

syncetalite-pwa/
├── index.html                # 網頁進入點
├── package.json
├── vite.config.js
├── .env                      # 存放 API 金鑰（不會上傳到 Git）
├── public/
│   ├── manifest.json         # PWA 設定檔
│   ├── sw.js                 # Service Worker
│   └── icons/
│       ├── icon-192.png
│       └── icon-512.png
└── src/
    ├── main.js                # 程式進入點，掛載所有模組
    ├── style.css               # 全域樣式
    ├── api/
    │   ├── tdx.js              # TDX 運輸資料 API 串接
    │   └── googleMaps.js       # Google Maps API 串接
    ├── components/
    │   ├── Map.js               # 地圖元件
    │   ├── ArrivalList.js       # 即時到站清單元件
    │   └── PreferenceSlider.js  # 使用者信心水準偏好調整元件
    └── logic/
        └── recommend.js         # 出發時間推薦邏輯

為什麼這樣分？

• api/ 資料夾只負責「跟外部服務講話」，方便未來抽換或加測試。
• components/ 負責畫面呈現，每個檔案對應一個可重複使用的 UI 區塊。
• logic/ 是純邏輯運算（例如推薦演算法），刻意跟畫面分開，方便日後獨立測試。

這種分層方式是軟體工程裡很基本但重要的原則：關注點分離（Separation of Concerns） 。

即使是小專案，養成這個習慣，之後要擴充或維護都會輕鬆很多。

明天我們會建立 public/manifest.json 與 public/sw.js，正式讓這個網頁變成一個「可安裝」的 PWA。